import React, { Component } from 'react';
import axios from 'axios'
import './index.css'
import { Link } from 'react-router-dom'
class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            top250: []
        }
    }
    render() {
        return (
            <div className='page'>
                {
                    this.state.top250.map(item => {
                        return (<Link to={`/detail?id=${item._id}`} key={item._id}>
                            <div className='item'>
                                <img src={item.pic} alt="" />
                                <p>{item.title}</p>
                            </div></Link>
                        )
                    })
                }
            </div>
        );
    }
    componentDidMount() {
        axios.get('http://122.112.161.135:4000/api/movie/top250').then(res => {
            console.log(res.data.res);
            this.setState({
                top250: res.data.res
            })
        })
    }
}

export default Index;
